import { ThemeType } from "@ant-design/icons-svg/lib/types"
import * as React from "react"
import * as AntdIcons from "@ant-design/icons"

const allIcons: {
  [key: string]: any
} = AntdIcons

const AllIconDemo = () => {
  const [currentTheme, setCurrentTheme] = React.useState("Outlined")

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const handleSelectChange = React.useCallback(
    (e: React.ChangeEvent<HTMLSelectElement>) => {
      const value = e.currentTarget.value as ThemeType
      setCurrentTheme(value)
    },
    []
  )

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const visibleIconList = React.useMemo(
    () =>
      Object.keys(allIcons).filter((iconName) =>
        iconName.includes(currentTheme)
      ),
    [currentTheme]
  )

  return (
    <div style={{ color: "#555" }}>
      {/* <h1 style={{ textAlign: "center" }}>All Icons</h1> */}
      {/* <div style={{ textAlign: "center" }}> */}
      {/*  <select */}
      {/*    name="theme-select" */}
      {/*    value={currentTheme} */}
      {/*    onChange={handleSelectChange} */}
      {/*  > */}
      {/*    <option value="Filled">Filled</option> */}
      {/*    <option value="Outlined">Outlined</option> */}
      {/*    <option value="TwoTone">Two-Tone</option> */}
      {/*  </select> */}
      {/* </div> */}
      {/* <Container> */}
      {/*  {visibleIconList.map((iconName) => { */}
      {/*    const Component = allIcons[iconName] */}
      {/*    return ( */}
      {/*      <Card key={iconName}> */}
      {/*        <Component style={{ fontSize: "24px" }} /> */}
      {/*        <NameDescription>{iconName}</NameDescription> */}
      {/*      </Card> */}
      {/*    ) */}
      {/*  })} */}
      {/* </Container> */}
    </div>
  )
}

export default AllIconDemo
